<template>
  <div class="form-setting-panel form-subform-setting">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      :disabled="isSystem"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- start 必填 -->
        <form-required-setting
          :field="field"
          @input="update"
        ></form-required-setting>
        <!-- end 必填 -->
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 子表字段 -->
    <div
      class="form-setting-group form-setting-item"
      v-if="subformFields.length"
    >
      <h4 class="form-item-title">
        {{$t('common.base.childFormField')}}
        <el-tooltip :content="$t('common.base.tip.childFormFieldAllowMax', {count:9})" placement="top">
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </h4>

      <draggable
        class="subform-fields-list"
        :list="subformFields"
        animation="180"
      >
        <div
          class="subform-field-item"
          v-for="(field, index) in subformFields"
          :key="`${field.fieldName}_${index}`"
        >
          <i class="iconfont icon-tuozhuaipaixu"></i>
          <span class="subform-field-item-name">{{ field.displayName }}</span>
        </div>
      </draggable>
    </div>
    <!-- end 子表字段 -->
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
import FormSubFormMixin from '@src/component/form/mixin/form.subForm';
/* props */
import { settingProps } from '@src/component/form/components/props';
/* components */
import draggable from 'vuedraggable';

export default {
  name: 'form-subform-setting',
  components: {
    draggable
  },
  mixins: [SettingMixin, FormSubFormMixin],
  props: settingProps
};
</script>

<style lang="scss" scoped>
@import './FormSubForm.scss';
</style>
